<template>
    <div class="apprContainer" @click="goToDetail">
        <div class="startItem">
            <div class="leftCon">
                <div class="nameIcon" :class="{'xiaojia':item.busi_id.indexOf('XJ') > -1}">
                {{item.busi_id.indexOf('XJ') > -1 ? '销' : '假'}}
                </div>
            </div>
            <div class="fluid">
                <p class="titleAppr"><span v-if="item.busi_id.indexOf('QJ') > -1" class="title">我的请假申请</span><span v-else class="title">我的销假申请</span><span class="time">{{item.start_time.replace(/\-/g,".")}}</span></p>
                <ul>
                    <li><span class="">请假类型</span> : <span>{{item.leave_name}}</span></li>
                    <li><span class="">开始时间</span> : <span>{{item.start_time}}&nbsp;&nbsp;{{item.Leave_st_section === '1' ? '上午' : '下午'}}</span></li>
                    <li><span class="">结束时间</span> : <span>{{item.end_time}}&nbsp;&nbsp;{{item.Leave_end_section === '1' ? '上午' : '下午'}}</span></li>
                </ul>
                <p :class="classObject">{{item.auditStatus}}</p> 
            </div>
        </div>
        <div class="bgColor"></div>
    </div>
</template>

<script>


export default {
  name: 'app',
  data() {
    return {
        appro:false,
        reject:false,
    };
  },
  props:['item'],
  methods: {
      goToDetail:function(){
          //  let params = {
          //     applyId:obj.applyId ,
          //     exectionId: obj.exectionId
          //  }

        localStorage.setItem('St_BsId',this.item.busi_id||this.item.applyId)
        location.href = '/module/myStart.html';
            
      }
  },
  computed:{
        classObject: function () {

            if (this.item.auditStatus.indexOf('拒绝') > -1) {
                return {'reject':true};
            } else if (this.item.auditStatus.indexOf('审批中') > -1) {
                return {'waitAppro':true};
            } else{
                return {'Appro':true};
            }

        }
  },
  filters:{
     filterName:function(val){
        return val.substr(-2);
     }
  },
  components: {


  },
  watch: {

  },
  mounted: function() {

  }
};
</script>

<style lang="less" scope="scope">

    .apprContainer{
        .startItem {
            display: flex;
            margin-top:0.3rem;
            .nameIcon{
                width: 0.48rem;
                height: 0.48rem;
                line-height:0.48rem;
                text-align:center;
                background-color:#007DE4;
                border-radius:50%;
                color:#eee;
                margin:auto;
            }
            div.xiaojia{
                background-color: #1cbe29;
            }
            .title{
            font-size:0.36rem;
            color:#000;
            font-weight:bold;
            }
            .fluid{
                flex: 1;
                padding-right:0.3rem;
                .titleAppr{
                    margin-bottom:0.06rem;
                }
                li{
                    font-size:0.32rem;
                }
                .reject{
                    color:#E24040;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;
                }
                .waitAppro{
                    color:#D8D41D;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;
                }
                .Appro{
                    color:green;
                    margin-top:0.1rem;
                    margin-bottom:0.1rem;                   
                }
                >p:not(.titleAppr){
                    font-size:0.32rem;
                }
            }
            .leftCon{
            padding-top:0.06rem;
            width:1rem;
            }
            .time{
            float:right;
            
            }
        }
        .bgColor{
        background-color:#F3F3F3;
        height:0.02rem;
        }
    }

</style>

